<template>
  <div>
    <div class="node" v-has="{action: 'task:schedule:list', effect: 'move'}">
    <div class="search_box topSelect">
      <SearchInput
        placeholder="定时任务名称"
        label="名称"
        style="margin-right:20px"
        :value="name"
        :onChange="(val) => changeSearch('name',val)"
      />
      <div class="selectBox">
        <el-button size="small" plain  icon="el-icon-search" @click="getQueryData">查询</el-button>        
      </div>
    </div>
    <Panel title="定时任务管理">
      <div slot='ext' class="examine">
        <el-button v-has="{action: 'task:schedule:add', effect: 'move'}" class="button-offt" type="success" icon="el-icon-plus" @click="()=>edit()">新增</el-button>
    </div>
    <TableEncapsulation
      slot="body"
      :tableConfig="tableConfig"
      :tableData="tableData"
    >
    <template slot="operation" slot-scope="operation">
          <el-button size="mini" icon="el-icon-edit"
            v-has="{action: 'task:schedule:update', effect: 'move'}"
            @click="()=>edit(operation.row)"
          >编辑</el-button>
        </template>
        <TablePager
          slot="pager"
          v-if="pager.use"
          :size="pager.size"
          :pageChange="pageChange"
          :show-total="pager.showTotal"
          :total="pager.total"
          :current="pager.current"
        >
          <span class="demonstration">GO></span>
        </TablePager>
    </TableEncapsulation>
    </Panel>
     <ModalPanel 
      :visible='visible'
      title="定时任务"
      :onCancel="onCancel"
      class="bannerDialog"
      :onOk="onSubmit">
      <div>
        <ModifyForm
          :hiddenBtn='true'
          :editColumn='editColumn'
          :updateData="updateData"
          labelWidth='100px'
          ref="configModal"
          class="ModifyForm"
          :temporaryData='modalData'>
        </ModifyForm>
      </div>
    </ModalPanel>
    </div>
    <div style="display: none;width:100%;height:100%;margin: auto;" v-has="{action: 'task:schedule:list', effect: 'noPremiss'}">
      <NoPremission></NoPremission>
    </div>
  </div>
</template>
<script>
import request from "@/tools/request";
import Panel from "@/components/Panel";
import TableEncapsulation from "@/components/TableEncapsulation";
import TablePager from "@/components/Pager";
import SearchInput from "@/components/SearchInput";
import ModifyForm from "@/components/ModifyForm";
import ModalPanel from "@/components/ModalPanel";
export default {
  name: "task",
  components: {
    TableEncapsulation,
    TablePager,
    Panel,
    SearchInput,
    ModifyForm,
    ModalPanel
  },
  data() {
    return {
      tableData: [],
      query: {
        page: 1
      },
       pager: {
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
      name: '',
      operation: true,
      visible:false,
      modalData:{},
      editColumn: [
        {
          name: "任务名称",
          prop: "taskName",
          type: "text",
          required: true,
          width:24
        },
        {
          name: "作业类名",
          prop: "jobClassName",
          type: "text",
          required: true,
          width:24
        },
        {
          name: "作业名",
          prop: "jobName",
          type: "text",
          required: true,
          width:24
        },
        {
          name: "作业表达式",
          prop: "jobCron",
          type: "text",
          required: true,
          width:24
        },
        {
          name: "作业json数据",
          prop: "jobDataJson",
          type: "text",
          required: true,
          width:24
        },
      ],

    };
  },
  created() {
    this.getQueryData();
  },
  computed: {
    tableConfig () {
      return {
        selection: true,
        columnConfig: [
          {
            label: "编号",
            type: "text",
            prop: "id",
            align: "center",
            width:100
          },
          {
            label: "名称",
            type: "text",
            prop: "taskName",
            align: "center"
          },
          {
            label: "作业类名",
            type: "text",
            prop: "jobClassName",
            align: "center"
          },
          {
            label: "作业名",
            type: "text",
            prop: "jobName",
            align: "center"
          },
          {
            label: "作业表达式",
            type: "text",
            prop: "jobCron",
            align: "center"
          },
          {
            label: "作业json数据",
            type: "text",
            prop: "jobDataJson",
            align: "center"
          },
          this.operation && {
            type: "operation",
            align: "center",
            label: "操作",
            width:320
          }
        ].filter(Boolean)
        }
    }
  },
  methods: {
    async getQueryData() {
      const res = await request({
        url: "/manage/task/query",
        method: "POST",
        data: {current:this.pager.current, size:this.pager.size}
      });
      this.tableData = res.data.records
      this.pager.total = res.data.total
      this.pager.current = res.data.current
    },
    pageChange(val) {
      this.pager.current = val;
      this.getQueryData();
    },
    changeSearch(key, val) {
      this[key] = val;
      this.pager.current = 1;
    },
    editStore(id){
      this.$router.push({ path: "/coupon/info",query:{id:id} })
    },
    commentDetail(id){
      this.$router.push({ path: "/storeDetail",query:{id:id,type: "toview"} })
    },
    edit(rowData){
      this.modalData = {...rowData}
      this.visible = true
    },
    async onSubmit(){
      this.$refs['configModal'].onSubmit()
    },
     onCancel(){
      this.visible = false
    },
    async updateData(values){
      let url, msg
      if (values.id){
        url = '/manage/task/update'
        msg = '编辑成功'
      }else {
        url = '/manage/task/add'
        msg = '添加成功'
      }
    let res = await request({
      url: url,
      method: 'POST',
      data: values
    })
    if (res.code !==200) return
     this.$message.success(msg)
      this.visible = false
      this.getQueryData()
    },
  }
}
</script>
<style lang='scss' >

</style>